<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="欢迎注册小v商城" left-arrow @click-left="$router.back()"/>
    </header>
    <section class="content">
      <van-field v-model="tel" type="tel" placeholder="请输入手机号" clearable/>
      <van-button round block :disabled="telFlag" @click="checkphone" color="linear-gradient(to left, #ff6034, #ee0a24)">下一步</van-button>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Dialog, Toast } from 'vant'
import { docheckphone } from '@/api'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Toast)

export default {
  data () {
    return {
      tel: '',
      reg: /^1[3456789]\d{9}$/
    }
  },
  methods: {
    checkphone () {
      // 调用接口, 检测手机号,将该用户注册的手机账号存入本地,未注册弹出即将获取短信验证码的提示框
      docheckphone({ tel: this.tel }).then(res => {
        localStorage.setItem('mobile', this.tel)
        if (res.data.code === '1002') {
          // console.log(res.data)
          Toast('该手机号已绑定小v商城')
        } else {
          // console.log(res.data)
          Dialog.confirm({
            message: '我们将发送短信验证码至:<br>' + this.tel,
            messageAlign: 'left',
            theme: 'round'
          })
            .then(() => {
              this.$router.push('/sms')
            })
            .catch(() => {
              // on cancel
            })
        }
      })
    }
  },
  computed: {
    telFlag () {
      if (this.tel === '' || !this.reg.test(this.tel)) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .box{
    background: #fff;
    .content {
      padding: 20px 30px;
      .van-cell .van-feild {
        border-bottom: 1px solid #efefef;
      }
      .van-button {
        margin-top: 40px;
      }
    }
  }
  .van-dialog {
    .van-dialog__confirm {
      .van-button__content {
        background-color: #f00;
        color: #fff;
      }
    }
  }
</style>
